<template>
  <div class="pie-box">
    <div :id="id"></div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  props: {
    id: String
  },
  data: function () {
    return {
      myChart: null
    }
  },
  computed: {
    ...mapState({
      comGauge: state => state.comGauge.option
    })
  },
  mounted () {
    // 基于准备好的dom，初始化echarts实例
    this.myChart = this.$echarts.init(document.getElementById(this.id))

    // 使用刚指定的配置项和数据显示图表。
    this.myChart.setOption(this.comGauge)

    this.$store.dispatch('setSeries')
  },
  watch: {
    comGauge: {
      deep: true,
      handler: function () {
        console.log('监听器---')
        this.myChart.setOption(this.comGauge)
      }
    }
  }
}
</script>

<style>
.pie-box,
.pie-box > div {
  height: 100%;
}
</style>
